<template>
	<view class="content" style="font-size: 32rpx;">
		<!--  最新体重  -->
		<view class="new_weight" :style="{backgroundColor: mainColor}">
			<view class="new_weight_number">{{bmi > 0 ? bmi : '0'}}</view>
			<view v-if="bmi > 0" class="new_weight_unit">({{bmiLevel}})</view>
		</view>
		<!--  身高体重  -->
		<view class="block_out">
			<view class="block_title">基本信息</view>
			<view class="block_content">
				<view class="info_item">
					<view class="info_item_left">体重：</view>
					<view v-if="newWeight" class="info_item_right">{{newWeight}}({{config.unit}})</view>
					<view v-else class="info_item_right font_normal" @click="goToHome">暂无数据，请现在首页进行新增体重</view>
				</view>
				<view class="info_item">
					<view class="info_item_left">身高：</view>
					<view v-if="config && config.stature" class="info_item_right">{{config.stature}}(厘米)</view>
					<view v-else class="info_item_right font_normal" @click="goToConfig">暂无数据，请现在我的页面 => 配置页面 => 配置身高</view>
				</view>
			</view>
		</view>
		<!--  标准对照表  -->
		<view class="block_out">
			<view class="block_title">BMI标准对照表</view>
			<view class="table_out">
				<view class="table_item" :style="{backgroundColor: mainColor, color: 'white', fontWeight: 'bold'}" >
					<view class="table_item_inner">
						BMI值
					</view>
					<view class="table_item_inner">健康等级</view>
				</view>
				<view class="table_item" v-for="(item, index) in bmiList">
					<view v-if="index == 0" class="table_item_inner">
						{{'<' + item.end}}
					</view>
					<view v-else-if="index == bmiList.length - 1" class="table_item_inner">
						{{'>' + item.start}}
					</view>
					<view v-else class="table_item_inner">
						{{item.start + '~' + item.end}}
					</view>
					<view class="table_item_inner">{{item.label}}</view>
				</view>
			</view>
		</view>
		<!--  BMI介绍  -->
		<view class="block_out">
			<view class="block_title">BMI介绍</view>
			<view class="block_content">
				<view class="info_item">
					<view class="info_item_left">简介：</view>
					<view class="info_item_right">身体质量指数，是BMI（Body Mass Index [4] ）指数，简称体质指数，是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。</view>
				</view>
				<view class="info_item">
					<view class="info_item_left">公式：</view>
					<view class="info_item_right">BMI=体重÷(身高 x 身高)。（体重单位：千克；身高单位：米。）</view>
				</view>
				
				
			</view>
		</view>
		<!--  底部导航栏  -->
		<view :style="{height: navigationHeight + 'rpx'}"></view>
		<bottom-navigation :navigationIndex="2"></bottom-navigation>
	</view>
</template>

<script>
	import {
		findWeightPageApi,
		addWeightApi,
		deleteWeightApi
	} from '@/api/weightApi.js'
	import {
		verifyPostNumber
	} from '@/utils/verifyUtil.js'
	import {
		getDate,
		getYear,
		getMonth,
		getDay,
		getHour,
		getMinute,
		getSecond,
		addDate
	} from '@/utils/dateUtil.js'
	import toastUtil from '@/utils/toastUtil.js'
	import userUtil from '@/utils/user/userUtil.js'
	import storageUtil from '../../utils/storageUtil.js'
	import configUtil from '../../utils/config/configUtil.js'
	import computeUtil from "@/utils/computeUtil.js"

	// 获取应用实例
	const app = getApp()

	export default {
		data() {
			return {
				// 系统平台
				system: app.globalData.system,
				// 导航栏高度
				navigationHeight: app.globalData.navigationHeight,
				// 统一背景颜色
				unifyBgColor: app.globalData.unifyBgColor,
				// 顶部导航栏高度
				topNavigationHeight: app.globalData.topNavigationHeight,
				// 主色调
				mainColor: app.globalData.mainColor,
				// 主色调
				maxHeight: app.globalData.maxHeight,
				// 分页提示
				pageMsg: '没有更多了',
				// 分页提示 ---- 加载中
				pageMsgLoading: '加载中',
				// 分页提示 ---- 没有更多了
				pageMsgNone: '没有更多了',
				// 下拉刷新标志
				downPullFlag: false,
				// 上拉加载标志
				topPullFlag: false,
				// scroll view 高度
				scrollHeight: 500,
				// 表单
				form: {
					// 日期
					date: null,
					// 时间
					time: null,
					// 时间日期
					dateTime: null,
					// 体重
					weight: null
				},
				// 搜索表单
				searForm: {
					// 分页大小
					pageSize: 10,
					// 查询完毕
					overFlag: false
				},
				// 体重集合
				weightList: [],
				// 展示表单标志
				showFormFlag: false,
				// 配置信息
				config: {
					unit: '公斤'
				},
				// 最新的体重
				newWeight: null,
				// bmi
				bmi: null,
				// bmi等级
				bmiLevel: null,
				// bmi集合
				bmiList: [{
					end: 18.5,
					label: '低体重'
				}, {
					start: 18.5,
					end: 23.9,
					label: '正常'
				}, {
					start: 24.0,
					end: 27.9,
					label: '超重'
				}, {
					start: 28.0,
					label: '肥胖'
				}]
			}
		},
		onLoad() {
			// 开启微信内置分享功能
			// shareUtil.startShare()
			// 获取配置
			console.log('onload....')




		},
		onShow() {
			console.log('onshow...')
			// 查询配置
			configUtil.getConfig().then((res) => {
				console.log('config res : ', res)
				this.config = storageUtil.getConfig()
				this.findWeightPage()
			})

		},
		// 页面的下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh.........')
			// 刷新数据
			this.findWeightPage()
		},
		methods: {
			// 分享给朋友
			onShareAppMessage() {
				return shareUtil.shareToFreind()
			},

			// 加载更多数据
			scrolltolower() {
				console.log('scrolltolower...........')
				this.findNextWeightPage()
			},

			// 下拉刷新
			refresherrefresh() {
				console.log('refresherrefresh...........')
				// 刷新数据
				this.findWeightPage()
			},

			/**
			 * 获取直播录像列表
			 * @param {*} page 第几页
			 * @param {*} callback 成功回调数据
			 */
			findWeightPage(page = 1, callback) {
				console.log('findWeightPage........')
				// 页数超过了
				let searForm = this.searForm
				searForm.skip = 0
				// uni.startPullDownRefresh()
				this.pageMsgToLoading()
				toastUtil.showLoading()
				let res = findWeightPageApi(searForm).then((res) => {
					// 成功
					if (res.code === 0) {
						console.log('res.data : ', res.data)
						this.weightList = res.data
					} else {
						console.log('findWeightPageApi   查询失败....')
					}
					this.computeBmi()
					console.log(" success res : ", res)
				}, (res) => {
					console.log(" fail res : ", res)
					toastUtil.showToast("查询体重列表失败!")
				}).finally((res) => {
					uni.stopPullDownRefresh()
					this.pageMsgToNone()
					toastUtil.hideLoading()
				})
			},

			

			// 切换成加载中
			pageMsgToLoading() {
				this.pageMsg = this.pageMsgLoading
			},
			// 切换成没有更多
			pageMsgToNone() {
				this.pageMsg = this.pageMsgNone
			},
			
			// 计算bmi
			computeBmi(){
				console.log('computeBmi.........')
				console.log('this.weightList : ', this.weightList)
				// 最新的体重
				let weightList = this.weightList
				let newWeight = this.newWeight
				if(weightList && weightList.length > 0){
					newWeight = weightList[0].weight
					this.newWeight = newWeight
				}
				// 身高
				let stature = this.config.stature
				// 设置体重的单位
				let unit = this.config.unit
				// 身高 体重都存在 再进行计算
				if(newWeight && stature){
					console.log('computeBmi.........  计算.......')
					// 计算bmi   bmi = 体重(kg) / 身高(m) * 身高(m)
					let bmi = null
					let unit = this.config.unit
					if(!unit){
						unit = '公斤'
						this.config.unit = unit
					}
					if(unit == '斤'){
						newWeight = computeUtil.div(newWeight, 2)
					}
					stature = computeUtil.div(stature, 100)
					bmi = computeUtil.div(newWeight, computeUtil.mul(stature, stature))
					bmi = bmi.toFixed(2)
					this.bmi = bmi
					let bmiLevel = ''
					// 计算等级
					let bmiList = this.bmiList
					for(let i = 0 ; i < bmiList.length ; i ++){
						let item = bmiList[i]
						if(i == 0){
							if(bmi < item.end){
								bmiLevel = item.label
							}
						}else if(i == bmiList.length - 1){
							if(bmi >= item.start){
								bmiLevel = item.label
							}
						}else {
							if(bmi >= item.start && bmi < item.end){
								bmiLevel = item.label
							}
						}
					}
					this.bmiLevel = bmiLevel
					console.log('this.bmi : ', this.bmi)
					console.log('this.bmiLevel : ', this.bmiLevel)
				}
			},
			
			/**
			 * 跳转配置页面
			 */
			goToConfig(){
				uni.navigateTo({
					url: '/pages/mime/config/config'
				})
			},
			
			/**
			 * 跳转首页
			 */
			goToHome(){
				uni.reLaunch({
					url: "/pages/index/index"
				})
			}

			
		}
	}
</script>

<style>
	.content {
		/* 		width: 100%;
		height: 100%; */
	}

	/*  最新体重 外部  */
	.new_weight {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200rpx;
		color: white;
	}

	/*  最新体重 数字  */
	.new_weight_number {
		font-size: 60rpx;
	}

	/*  最新体重 单位  */
	.new_weight_unit {
		padding-top: 18rpx;
	}

	/*  块 外部  */
	.block_out{
		margin: 20rpx;
		margin-bottom: 40rpx;
		color: rgb(100, 100, 100);
	}
	/*  块 标题  */
	.block_title{
		font-weight: bold;
		font-size: 22rpx;
		padding-bottom: 5rpx;
	}
	/*  块 内容  */
	.block_content{
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 2rpx 2rpx 5rpx 5rpx rgb(200, 200, 200);
		padding: 20rpx;
	}
	/*  基本信息 项  */
	.info_item{
		display: flex;
		align-items: center;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
	}
	/*  基本信息 项 左边 */
	.info_item_left{
		min-width: 100rpx;
		color: rgb(50, 50, 50);
		font-weight: bold;
	}
	/*  基本信息 项 右边 */
	.info_item_right{
		padding-left: 10rpx;
	}
	
	/*  表格外部  */
	.table_out{
		background-color: white;
		border-radius: 2rpx;
		box-shadow: 2rpx 2rpx 5rpx 5rpx rgb(200, 200, 200);
	}
	/*  表格项  */
	.table_item{
		display: flex;
		border-bottom: 1rpx solid rgb(200, 200, 200);
	}
	
	/*  表格项 内部项 */
	.table_item_inner{
		display: flex;
		border-right: 1rpx solid rgb(200, 200, 200);
		flex: 1;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
	}



</style>